<template>
  <div class="student">
    <h1>学生姓名:{{name}}</h1>
    <h2>学生年龄:{{age}}</h2>
    <h2>number:{{number}}</h2>
    <button @click="add">点我n++</button>
    <button @click="sendStudentName">发送学生姓名</button>
    <button @click="unbind">解绑atguigu事件</button>
    <button @click="death">销毁了当前Student组件的实例对象</button>
</div>
</template>

<script>
    export default {
        name: "StudentInfo",
        data() {
            return {
                name: "张三",
                age: 18,
                number: 0
            }
        },
        methods: {
            add(){
                console.log("add");
                this.number++;
            },
            sendStudentName() {
                //触发Student组件身上的atguigu事件，并传递参数
                this.$emit("atguigu", this.name, 666,888,999);
                this.$emit("demo");
            },
            unbind() {
                //解绑Student组件身上的atguigu事件,解绑一个事件
                // this.$off("atguigu");
                //解绑多个事件
                this.$off(["atguigu", "demo"]);
                //解绑所有事件
                // this.$off();
            },
            death() {   
                //销毁当前Student组件的实例对象,销毁后所有Student实例的自定义事件都不奏效了
                this.$destroy();
            }
        }
    }
</script>

<style scoped>
    .student{
        background-color: orange;
    }
</style>